<template>
  <div class="rentOrder">
    <template v-if="leaseProductEnabled == 'true'">
      <div class="order-item" v-for="(it, ind) in list" :key="ind">
        <div class="item-name">{{ it.name }}</div>
        <div class="item-info">
          <span class="count total-count">总数量:{{ it.totalCount }}</span>
          <span class="count res-count"
            >库存余量:{{ Number(it.totalCount) - Number(it.salesCount) }}</span
          >
          <span class="count rent-count">租赁数量:{{ it.salesCount }}</span>
        </div>
        <div class="rent-desk">
          <template v-if="Array.isArray(it.numName)">
            <span
              class="desk-item"
              @click.stop="changeDesk(bIt, it)"
              v-for="(bIt, bInd) in sortNum(it.numName)"
              :key="bInd"
              ><span class="desk-item-inner">{{ bIt }}</span></span
            >
          </template>
          <template v-else> - </template>
        </div>
      </div>
      <!-- <div class="mask">
        <div class="return" @click.stop="">
          <div class="item-info">
            <span class="tit">当前所选设备为</span>
            <div class="device-name">狗屁2狗屁2狗屁2狗屁2狗屁2狗屁2狗屁2</div>
            <div class="site">使用机位:<b>32号机</b></div>
          </div>
          <div class="modify-item" @click.stop="returnDevice">归还该设备</div>
        </div>
      </div> -->
    </template>
    <template v-else>
      <div style="font-size: 0.32rem; text-align: center">
        尚未开通，请联系火星捕手工作人员，开通租赁管理，可以实现外设租赁和外设管理。
      </div>
    </template>
    <!--  -->
    <div class="rent-out-wrap" v-if="showRentInfo" @click.stop="cancelRentInfo">
      <div class="form-wrap" @click.stop="">
        <div class="rent-head">
          <span class="it">换机</span>
        </div>
        <div class="close-btn" @click.stop="cancelRentInfo">&times;</div>
        <div class="form-item">
          <div class="form-name">*选择区域</div>
          <div class="item-cont">
            <select
              name=""
              id=""
              v-model="rentForm.areaId"
              @change.prevent="changeArea"
            >
              <option :value="it.id" v-for="it in areas" :key="it.id">
                {{ it.name }}
              </option>
            </select>
          </div>
        </div>
        <div class="form-item">
          <div class="form-name">*选择机位</div>
          <div class="item-cont">
            <select
              name=""
              id=""
              v-model="rentForm.numId"
              @change.prevent="changeTable"
            >
              <option :value="it.id" v-for="it in tables" :key="it.id">
                {{ it.name }}
              </option>
            </select>
          </div>
        </div>
        <!-- <div class="rent-list">
          <div class="rent-head">
            <span class="it">商品</span>
            <span class="it">详情</span>
          </div>
          <div class="rent-goods">
            <div class="r-li">
              <span class="it" v-if="nowSelDeskItem">{{
                nowSelDeskItem.name
              }}</span>
              <span class="it">数量:1</span>
            </div>
            <div class="r-li">
              <span class="it">转至</span>
              <span class="it"></span>
            </div>
          </div>
        </div> -->
        <button
          class="sub-btn"
          style="margin-top: 0.5rem"
          @click.stop="sureSelRentInfo"
        >
          确定
        </button>
      </div>
    </div>
  </div>
</template>
<script>
import { API_BASE_URL } from "@/urlConfig/index";

export default {
  name: "rentOrder",
  data() {
    return {
      nowSelDeskItem: {},
      nowSelRentRule: null,
      nowSelRentGoodsRules: [],
      nowSelRentGoods: null,
      canClick: true,
      rentForm: {
        name: "",
        mobile: "",
        empId: "",
        empName: "",
        ruleId: "",
        productId: "",
        areaId: "",
        numName: "",
        numId: "",
        source: "EMPLOYEE",
      },
      tables: [],
      areas: [],
      showRentInfo: false,
      storeId: "",
      list: [],
      timer: null,
      leaseProductEnabled: "",
      nowSelItem: null,
    };
  },
  methods: {
    changeRule(e) {
      if (
        this.nowSelRentGoodsRules &&
        Array.isArray(this.nowSelRentGoodsRules) &&
        this.nowSelRentGoodsRules.length
      ) {
        this.nowSelRentGoodsRules.forEach((it) => {
          if (it.ruleId == this.rentForm.ruleId) {
            this.nowSelRentRule = it;
          }
        });
      }
    },
    changeArea() {
      if (this.areas && Array.isArray(this.areas)) {
        this.areas.forEach((it) => {
          if (it.id == this.rentForm.areaId) {
            this.tables = it.nums;
            this.rentForm.numId = "";
            this.rentForm.numName = "";
          }
        });
      }
      this.$forceUpdate();
    },
    changeTable() {
      if (this.tables && Array.isArray(this.tables)) {
        this.tables.forEach((it) => {
          if (it.id == this.rentForm.numId) {
            this.rentForm.numName = it.name;
          }
        });
      }
      this.$forceUpdate();
    },
    getRegionList() {
      this.$http({
        url: "region/list",
        method: "POST",
        data: {
          storeId: this.storeId,
        },
      }).then((res) => {
        if (res.data && Array.isArray(res.data) && res.data.length) {
          this.areas = res.data;
        }
      });
    },
    cancelRentInfo() {
      this.rentForm = {
        name: "",
        mobile: "",
        empId: "",
        empName: "",
        ruleId: "",
        productId: "",
        areaId: "",
        tableNo: "",
        numId: "",
        source: "EMPLOYEE",
      };
      this.showRentInfo = false;
      this.nowSelRentRule = null;
    },
    sureSelRentInfo() {
      console.log(this.rentForm);
      if (!this.rentForm.numId) {
        this.$message({
          message: "请选择机位",
          showClose: true,
          customClass: "error",
        });
        return;
      }
      if (
        this.rentForm.numName == "" ||
        String(this.rentForm.numName) == "null" ||
        String(this.rentForm.numName) == "undefined"
      ) {
        this.$message({
          message: "请选择机位",
          showClose: true,
          customClass: "error",
        });
        return;
      }
      this.confirmPaymentForRent();
    },
    confirmPaymentForRent() {
      // if(!this.rentForm.authCode){
      //     return;
      // }
      if (!this.canClick) {
        return;
      }
      this.canClick = false;
      this.$http({
        url: `${API_BASE_URL}v1/call/change/lease/order`,
        method: "POST",
        data: {
          numId: this.rentForm.numId,
          numName: this.rentForm.numName,
          oriNumName: this.nowSelDeskItem.deskNum,
          productId: this.nowSelDeskItem.id,
          storeId: this.storeId,
        },
      })
        .then((res) => {
          this.showRentInfo = false;
          this.$message({
            message: "操作成功",
            customClass: "success",
          });
          this.cancelRentInfo();
          this.getData();
          setTimeout(() => {
            this.canClick = true;
          }, 500);
        })
        .catch((err) => {
          setTimeout(() => {
            this.canClick = true;
          }, 500);
        });
    },
    //
    changeDesk(item, pIt) {
      try {
        if(!pIt.numName || !Array.isArray(pIt.numName) || !pIt.numName.length){
          return;
        }
      } catch (error) {
        
      }
      console.log(item, pIt);
      this.nowSelDeskItem = { ...pIt, deskNum: item };
      this.showRentInfo = true;
    },
    // returnDevice() {
    //   if (!this.nowSelItem) {
    //     return;
    //   }
    //   this.$http({
    //     url: `${API_BASE_URL}v1/call/create/lease/order/refund`,
    //     method: "POST",
    //     data: {
    //       id: this.nowSelItem.id,
    //     },
    //   })
    //     .then((res) => {
    //       this.$message({
    //         message: "归还成功！",
    //         customClass: 'success'
    //       });
    //       this.getData();
    //       console.log("res.data", res.data);
    //     })
    //     .catch((err) => {});
    // },
    sortNum(nums) {
      if (nums && Array.isArray(nums) && nums.length) {
        let tempNums = JSON.parse(JSON.stringify(nums));
        return tempNums.sort((a, b) => Number(a) - Number(b));
      } else {
        return "-";
      }
    },
    getData() {
      this.$http({
        url: `${API_BASE_URL}v1/call/lease/product/list`,
        method: "POST",
        data: {
          storeId: this.storeId,
        },
      }).then((res) => {
        if (res.data && Array.isArray(res.data)) {
          this.list = res.data;
        }
      });
    },
  },
  mounted() {
    try {
      let leaseProductEnabled = localStorage.getItem("leaseProductEnabled");
      this.leaseProductEnabled = leaseProductEnabled;
    } catch (error) {}
    try {
      this.storeId = localStorage.getItem("storeId");
    } catch (error) {}
    this.getData();
    this.timer = setInterval(() => {
      this.getData();
    }, 1000 * 60);
    this.getRegionList();
  },
  destroyed() {
    if (this.timer) {
      clearInterval(this.timer);
    }
  },
};
</script>
<style lang="scss" scoped>
.rentOrder {
  font-size: 0.32rem;
  width: 100%;
  height: 100%;
  background-color: #f4f4f4;
  overflow: hidden;
  overflow-y: auto;
  box-sizing: border-box;
  padding: 0.24rem;
  .order-item {
    box-sizing: border-box;
    padding: 0.24rem;
    background-color: #fff;
    margin-bottom: 0.48rem;
    border-radius: 0.259rem;
    .item-name {
      font-size: 0.36rem;
      font-weight: bold;
      padding-bottom: 0.24rem;
    }
    .item-info {
      font-size: 0.28rem;
      padding-bottom: 0.24rem;
      border-bottom: 1px solid #ddd;
      .count {
        padding-right: 0.24rem;
        font-size: 0.28rem;
        &.total-count {
          color: #025ece;
        }
        &.res-count {
          color: #ce4602;
        }
        &.rent-count {
          color: #08a52c;
        }
      }
    }
    .rent-desk {
      padding-top: 0.24rem;
      white-space: wrap;
      word-break: break-all;
      display: flex;
      flex-wrap: wrap;
      .desk-item {
        width: 20%;
        display: flex;
        justify-content: center;
        align-items: center;
        box-sizing: border-box;
        padding: 0.12rem;
        .desk-item-inner {
          width: 0.8rem;
          height: 0.8rem;
          border-radius: 0.4rem;
          background-color: #efefef;
          display: flex;
          justify-content: center;
          align-items: center;
          color: #408a00;
        }
      }
    }
  }
}
.mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  .return {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #fff;
    box-sizing: border-box;
    padding: 0.5rem 0.24rem;
    .item-info {
      text-align: center;
      .tit {
        display: inline-block;
        font-size: 0.3rem;
        padding-bottom: 0.24rem;
        color: #666;
      }
      .device-name {
        font-size: 0.32rem;
        font-weight: bold;
      }
      .site {
        padding-top: 0.24rem;
        padding-bottom: 0.96rem;
        font-size: 0.28rem;
        color: #ce4602;
      }
    }
    .modify-item {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 1rem;
      width: 100%;
      border-radius: 0.1rem;
      background-color: #408a00;
      color: #fff;
      font-size: 0.3rem;
    }
  }
}
.rent-out-wrap {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  z-index: 10;
  background-color: rgba(0, 0, 0, 0.59);
  .qrcode {
    z-index: 2;
  }
  #qrcode,
  .tit2 {
    width: 2.5rem;
    height: 2.5rem;
    position: absolute;
    bottom: 27%;
    left: 50%;
    background-color: #ccc;
    transform: translateX(-50%);
  }
  .tit2 {
    bottom: 30%;
    width: 100%;
    background-color: transparent;
    padding-left: 20%;
    color: #fff;
    font-size: 0.32rem;
    font-weight: bold;
  }
  .form-wrap {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #fff;
    width: 80%;
    border-radius: 5px;
    text-align: center;
    padding-top: 0.25rem;
    .close-btn {
      position: absolute;
      right: -0.25rem;
      top: -0.25rem;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 0.4rem;
      width: 0.5rem;
      height: 0.5rem;
      border-radius: 0.25rem;
      background: #ccc;
      color: #000;
    }
    .tit {
      font-size: 0.32rem;
      font-weight: bold;
      text-align: left;
      padding: 0.2rem;
    }
    .form-item {
      padding: 0.05rem 0.35rem 0 0.35rem;
      .form-name {
        width: 100%;
        text-align: left;
        padding-bottom: 0.1rem;
        font-size: 0.25rem;
        color: #db5f32;
      }
      .item-cont {
        width: 100%;
        position: relative;
        height: 0.9rem;
        display: flex;
        align-items: center;
        select {
          padding: 0;
        }
        input,
        select {
          width: 100%;
          text-align: left;
          margin: 0;
          border: none;
          box-sizing: border-box;
          background: none;
          font-family: ".PingFangSC";
          font-size: 0.28rem;
          height: 0.7rem;
          border: 1px solid #ddd;
          border-radius: 0.1rem;
          padding-left: 0.1rem;
        }
        .get-code {
          position: absolute;
          top: 0;
          right: 0;
          display: inline-block;
          width: 2rem;
          height: 0.7rem;
          line-height: 0.7rem;
          text-align: center;
          background-color: #ccc;
          color: #fff;
          font-size: 0.25rem;
        }
      }
    }
    .sub-btn {
      width: calc(100% - 0.7rem);
      height: 0.7rem;
      border: none;
      background-color: #db5f32;
      color: #fff;
      border-radius: 0.1rem;
      margin-bottom: 0.25rem;
      &.cancel {
        background-color: #ccc;
        margin-bottom: 0;
      }
    }
  }
  .rent-list {
    padding: 0.2rem;
    .rent-head {
      width: 100%;
      height: 0.5rem;
      background: #059313;
      color: #fff;
      display: flex;
      align-items: center;
      font-size: 0.28rem;
      .it {
        display: inline-block;
        text-align: center;
        width: 50%;
      }
    }
    .rent-goods {
      background: #f4f4f4;
      .r-li {
        min-height: 0.8rem;
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        font-size: 0.24rem;
        .it {
          width: 50%;
          font-size: 0.24rem;
          display: inline-block;
          text-align: center;
        }
      }
    }
  }
  .tit2 {
  }
  .tip {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 20%;
    color: #ccc;
    font-size: 0.25rem;
    width: 100%;
    white-space: nowrap;
    text-align: center;
  }
  .vip-charge {
    font-size: 0.3rem;
    width: 3rem;
    height: 0.68rem;
    border: 1px solid #db5f32;
    border-radius: 0.34rem;
    text-align: center;
    line-height: 0.68rem;
    color: #db5f32;
    position: absolute;
    bottom: 10%;
    left: 50%;
    transform: translate(-50%, 0);
  }
}
</style>